<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>登录结果为:{{loginResult}}</span>
        <login v-on:la='ha($event)'></login>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /**
                                                                    已知 login 是一个登录组件, 内部已经实现好布局和界面了
                                                                   要求1: 在使用login组件的时候, 传递一个字符串给login组件,替换login组件中的h1标签中的XXX
                                                                   要求2: 在login组件内部登录成功之后, 将登录结果传递给vm对象中的loginResult
                                                           **/
        Vue.component('login', {
            template: `
      <div style="width:500px;height:200px;border:1px solid red;">
        <h1>我是{{username}}的登录</h1>
        用户名: <input type="text" v-model="username"> <br>
        密码: <input type="password" v-model="password"> <br>
        <input type="button" value="登录" @click="handleLogin"> <br>
        <span>{{result}}</span>
      </div>
     `,
            data: function() {
                return {
                    username: "用户",
                    password: "",
                    result: '',
                    name: ''
                }
            },
            methods: {
                handleLogin: function() {
                    if (this.username == "admin" && this.password == "123456") {
                        this.result = '登录成功'
                    } else {
                        this.result = '登录失败'
                    }
                    this.$emit('la', this.result)
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                loginResult: ''
            },
            methods: {
                ha: function(i) {
                    this.loginResult = i
                }
            }
        })
    </script>
</body>

</html>